<template>
  <div>
    <!-- 确保ID与你的图表对应 -->
    <div id="echartsyou3" class="charts"></div>
  </div>
</template>

<script>
import * as echarts from "echarts"; // 确保已经安装了echarts并正确导入

export default {
  data() {
    return {
      timer: null,
    };
  },
  mounted() {
    this.initEcharts();
    var numss = 1;
    this.timer = setInterval(() => {
      if (this.timer) {
        if (numss - 1 == 0) {
          this.initEcharts();
          numss = numss + 1;
        } else if (numss - 2 == 0) {
          this.initEcharts1();
          numss = numss + 1;
        } else if (numss - 3 == 0) {
          this.initEcharts2();
          numss = numss + 1;
        } else {
          this.initEcharts3();
          numss = numss - 3;
        }
      }
    }, 1500);
    window.addEventListener("resize", this.handleWindowResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleWindowResize);
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    initEcharts() {
      const myChart = echarts.init(document.getElementById("echartsyou3"));

      // 基于准备好的dom，初始化echarts实例

      var data = {
        chart: [
          {
            month: "武汉",
            value: 10,
          },

          {
            month: "佛山",
            value: 8.7,
          },

          {
            month: "西安",
            value: 6.8,
          },

          {
            month: "大连",
            value: 5.9,
          },

          {
            month: "天津",
            value: 5.2,
          },
        ],
      };

      var xAxisMonth = [],
        barData = [],
        lineData = [];
      for (var i = 0; i < data.chart.length; i++) {
        xAxisMonth.push(data.chart[i].month);
        barData.push({
          name: xAxisMonth[i],
          value: data.chart[i].value,
        });
        lineData.push({
          name: xAxisMonth[i],
          value: data.chart[i].ratio,
        });
      }

      const option = {
        // backgroundColor: "#020d22",
        title: "",
        grid: {
          top: "10%",
          left: "30",
          bottom: "0",
          right: "10",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          formatter: function (params) {
            return (
              params[0]["data"].name +
              "<br/>" +
              "报警次数: " +
              params[1]["data"].value +
              "次"
            );
          },
        },
        xAxis: [
          {
            type: "category",
            show: false,
            data: ["武汉", "佛山", "西安", "大连", "天津"],
            axisLabel: {
              textStyle: {
                color: "#b6b5ab",
              },
            },
          },
          {
            type: "category",
            position: "bottom",
            data: xAxisMonth,
            boundaryGap: true,
            // offset: 40,
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(255,255,255,0.2)",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              color: "rgba(255,255,255,0.2)",
            },
            axisLabel: {
              textStyle: {
                color: "#b6b5ab",
              },
            },
          },
        ],
        yAxis: [
          {
            show: true,
            offset: 15,
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(255,255,255,0.1)",
              },
            },

            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              color: "rgba(255,255,255,0.1",
            },
            axisLabel: {
              show: true,
              color: "#b6b5ab",
            },
          },
          {
            show: false,
            type: "value",
            // name: "合格率(%)",
            nameTextStyle: {
              color: "#ccc",
            },
            axisLabel: {
              color: "#ccc",
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
            },
            axisTick: {
              show: true,
            },
          },
        ],
        color: ["#e54035"],
        series: [
          {
            name: "训练人次",
            type: "pictorialBar",
            xAxisIndex: 1,
            barCategoryGap: "-40%",
            // barCategoryGap: '-5%',
            symbol: 'path://d="M150 50 L130 130 L170 130  Z"',
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = [
                    "rgba(13,177,205,0.8)",
                    "rgba(29,103,182,0.6)",
                    "rgba(13,177,205,0.8)",
                    "rgba(29,103,182,0.6)",
                    "rgba(13,177,205,0.8)",
                    "rgba(29,103,182,0.6)",
                  ];
                  return colorList[params.dataIndex];
                },
              },
              emphasis: {
                opacity: 1,
              },
            },
            data: barData,
          },
          {
            symbol:
              "image://",
            symbolSize: 42,

            type: "line",
            yAxisIndex: 1,
            data: lineData,
            itemStyle: {
              normal: {
                borderWidth: 5,
                color: {
                  colorStops: [
                    {
                      offset: 0,
                      color: "#821eff",
                    },

                    {
                      offset: 1,
                      color: "#204fff",
                    },
                  ],
                },
              },
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

    initEcharts1() {
      const myChart = echarts.init(document.getElementById("echartsyou3"));

      // 基于准备好的dom，初始化echarts实例

      var data = {
        chart: [
          {
            month: "武汉",
            value: 5.2,
          },

          {
            month: "佛山",
            value: 5.9,
          },

          {
            month: "西安",
            value: 6.1,
          },

          {
            month: "大连",
            value: 8.7,
          },

          {
            month: "天津",
            value: 10,
          },
        ],
      };

      var xAxisMonth = [],
        barData = [],
        lineData = [];
      for (var i = 0; i < data.chart.length; i++) {
        xAxisMonth.push(data.chart[i].month);
        barData.push({
          name: xAxisMonth[i],
          value: data.chart[i].value,
        });
        lineData.push({
          name: xAxisMonth[i],
          value: data.chart[i].ratio,
        });
      }

      const option = {
        // backgroundColor: "#020d22",
        title: "",
        grid: {
          top: "10%",
          left: "30",
          bottom: "0",
          right: "10",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          formatter: function (params) {
            return (
              params[0]["data"].name +
              "<br/>" +
              "报警次数: " +
              params[1]["data"].value +
              "次"
            );
          },
        },
        xAxis: [
          {
            type: "category",
            show: false,
            data: ["武汉", "佛山", "西安", "大连", "天津"],
            axisLabel: {
              textStyle: {
                color: "#b6b5ab",
              },
            },
          },
          {
            type: "category",
            position: "bottom",
            data: xAxisMonth,
            boundaryGap: true,
            // offset: 40,
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(255,255,255,0.2)",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              color: "rgba(255,255,255,0.2)",
            },
            axisLabel: {
              textStyle: {
                color: "#b6b5ab",
              },
            },
          },
        ],
        yAxis: [
          {
            show: true,
            offset: 15,
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(255,255,255,0.1)",
              },
            },

            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              color: "rgba(255,255,255,0.1",
            },
            axisLabel: {
              show: true,
              color: "#b6b5ab",
            },
          },
          {
            show: false,
            type: "value",
            // name: "合格率(%)",
            nameTextStyle: {
              color: "#ccc",
            },
            axisLabel: {
              color: "#ccc",
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
            },
            axisTick: {
              show: true,
            },
          },
        ],
        color: ["#e54035"],
        series: [
          {
            name: "训练人次",
            type: "pictorialBar",
            xAxisIndex: 1,
            barCategoryGap: "-40%",
            // barCategoryGap: '-5%',
            symbol: 'path://d="M150 50 L130 130 L170 130  Z"',
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = [
                    "rgba(13,177,205,0.8)",
                    "rgba(29,103,182,0.6)",
                    "rgba(13,177,205,0.8)",
                    "rgba(29,103,182,0.6)",
                    "rgba(13,177,205,0.8)",
                    "rgba(29,103,182,0.6)",
                  ];
                  return colorList[params.dataIndex];
                },
              },
              emphasis: {
                opacity: 1,
              },
            },
            data: barData,
          },
          {
            symbol:
              "image://",
            symbolSize: 42,

            type: "line",
            yAxisIndex: 1,
            data: lineData,
            itemStyle: {
              normal: {
                borderWidth: 5,
                color: {
                  colorStops: [
                    {
                      offset: 0,
                      color: "#821eff",
                    },

                    {
                      offset: 1,
                      color: "#204fff",
                    },
                  ],
                },
              },
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    initEcharts2() {
      const myChart = echarts.init(document.getElementById("echartsyou3"));

      // 基于准备好的dom，初始化echarts实例

      var data = {
        chart: [
          {
            month: "武汉",
            value: 3.4,
          },

          {
            month: "佛山",
            value: 5.9,
          },

          {
            month: "西安",
            value: 4.5,
          },

          {
            month: "大连",
            value: 8.7,
          },

          {
            month: "天津",
            value: 7.1,
          },
        ],
      };

      var xAxisMonth = [],
        barData = [],
        lineData = [];
      for (var i = 0; i < data.chart.length; i++) {
        xAxisMonth.push(data.chart[i].month);
        barData.push({
          name: xAxisMonth[i],
          value: data.chart[i].value,
        });
        lineData.push({
          name: xAxisMonth[i],
          value: data.chart[i].ratio,
        });
      }

      const option = {
        // backgroundColor: "#020d22",
        title: "",
        grid: {
          top: "10%",
          left: "30",
          bottom: "0",
          right: "10",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          formatter: function (params) {
            return (
              params[0]["data"].name +
              "<br/>" +
              "报警次数: " +
              params[1]["data"].value +
              "次"
            );
          },
        },
        xAxis: [
          {
            type: "category",
            show: false,
            data: ["武汉", "佛山", "西安", "大连", "天津"],
            axisLabel: {
              textStyle: {
                color: "#b6b5ab",
              },
            },
          },
          {
            type: "category",
            position: "bottom",
            data: xAxisMonth,
            boundaryGap: true,
            // offset: 40,
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(255,255,255,0.2)",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              color: "rgba(255,255,255,0.2)",
            },
            axisLabel: {
              textStyle: {
                color: "#b6b5ab",
              },
            },
          },
        ],
        yAxis: [
          {
            show: true,
            offset: 15,
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(255,255,255,0.1)",
              },
            },

            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              color: "rgba(255,255,255,0.1",
            },
            axisLabel: {
              show: true,
              color: "#b6b5ab",
            },
          },
          {
            show: false,
            type: "value",
            // name: "合格率(%)",
            nameTextStyle: {
              color: "#ccc",
            },
            axisLabel: {
              color: "#ccc",
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
            },
            axisTick: {
              show: true,
            },
          },
        ],
        color: ["#e54035"],
        series: [
          {
            name: "训练人次",
            type: "pictorialBar",
            xAxisIndex: 1,
            barCategoryGap: "-40%",
            // barCategoryGap: '-5%',
            symbol: 'path://d="M150 50 L130 130 L170 130  Z"',
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = [
                    "rgba(13,177,205,0.8)",
                    "rgba(29,103,182,0.6)",
                    "rgba(13,177,205,0.8)",
                    "rgba(29,103,182,0.6)",
                    "rgba(13,177,205,0.8)",
                    "rgba(29,103,182,0.6)",
                  ];
                  return colorList[params.dataIndex];
                },
              },
              emphasis: {
                opacity: 1,
              },
            },
            data: barData,
          },
          {
            symbol:
              "image://",
            symbolSize: 42,

            type: "line",
            yAxisIndex: 1,
            data: lineData,
            itemStyle: {
              normal: {
                borderWidth: 5,
                color: {
                  colorStops: [
                    {
                      offset: 0,
                      color: "#821eff",
                    },

                    {
                      offset: 1,
                      color: "#204fff",
                    },
                  ],
                },
              },
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    initEcharts3() {
      const myChart = echarts.init(document.getElementById("echartsyou3"));

      // 基于准备好的dom，初始化echarts实例

      var data = {
        chart: [
          {
            month: "武汉",
            value: 5.6,
          },

          {
            month: "佛山",
            value: 8.7,
          },

          {
            month: "西安",
            value: 6.1,
          },

          {
            month: "大连",
            value: 9.5,
          },

          {
            month: "天津",
            value: 7.7,
          },
        ],
      };

      var xAxisMonth = [],
        barData = [],
        lineData = [];
      for (var i = 0; i < data.chart.length; i++) {
        xAxisMonth.push(data.chart[i].month);
        barData.push({
          name: xAxisMonth[i],
          value: data.chart[i].value,
        });
        lineData.push({
          name: xAxisMonth[i],
          value: data.chart[i].ratio,
        });
      }

      const option = {
        // backgroundColor: "#020d22",
        title: "",
        grid: {
          top: "10%",
          left: "30",
          bottom: "0",
          right: "10",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          formatter: function (params) {
            return (
              params[0]["data"].name +
              "<br/>" +
              "报警次数: " +
              params[1]["data"].value +
              "次"
            );
          },
        },
        xAxis: [
          {
            type: "category",
            show: false,
            data: ["武汉", "佛山", "西安", "大连", "天津"],
            axisLabel: {
              textStyle: {
                color: "#b6b5ab",
              },
            },
          },
          {
            type: "category",
            position: "bottom",
            data: xAxisMonth,
            boundaryGap: true,
            // offset: 40,
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(255,255,255,0.2)",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              color: "rgba(255,255,255,0.2)",
            },
            axisLabel: {
              textStyle: {
                color: "#b6b5ab",
              },
            },
          },
        ],
        yAxis: [
          {
            show: true,
            offset: 15,
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(255,255,255,0.1)",
              },
            },

            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              color: "rgba(255,255,255,0.1",
            },
            axisLabel: {
              show: true,
              color: "#b6b5ab",
            },
          },
          {
            show: false,
            type: "value",
            // name: "合格率(%)",
            nameTextStyle: {
              color: "#ccc",
            },
            axisLabel: {
              color: "#ccc",
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
            },
            axisTick: {
              show: true,
            },
          },
        ],
        color: ["#e54035"],
        series: [
          {
            name: "训练人次",
            type: "pictorialBar",
            xAxisIndex: 1,
            barCategoryGap: "-40%",
            // barCategoryGap: '-5%',
            symbol: 'path://d="M150 50 L130 130 L170 130  Z"',
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = [
                    "rgba(13,177,205,0.8)",
                    "rgba(29,103,182,0.6)",
                    "rgba(13,177,205,0.8)",
                    "rgba(29,103,182,0.6)",
                    "rgba(13,177,205,0.8)",
                    "rgba(29,103,182,0.6)",
                  ];
                  return colorList[params.dataIndex];
                },
              },
              emphasis: {
                opacity: 1,
              },
            },
            data: barData,
          },
          {
            symbol:
              "image://",
            symbolSize: 42,

            type: "line",
            yAxisIndex: 1,
            data: lineData,
            itemStyle: {
              normal: {
                borderWidth: 5,
                color: {
                  colorStops: [
                    {
                      offset: 0,
                      color: "#821eff",
                    },

                    {
                      offset: 1,
                      color: "#204fff",
                    },
                  ],
                },
              },
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

    handleWindowResize() {
      this.$nextTick(() => {
        this.myCharts.forEach((chart) => chart.resize());
      });
    },
  },
  data() {
    return {
      myCharts: [], // 用于存储所有echarts实例，以便在窗口调整大小时重新调整图表
    };
  },
};
</script>
